import React from 'react';
import { DatePicker, Col, FormLabel, FormControl } from '@casstime/bricks';
import { observer } from 'mobx-react';
import ExamplePageStore from '../stores/ExamplePageStore';
import moment from 'moment';

interface IDateSelectProps {
  store: ExamplePageStore;
}
@observer
export default class DateSelect extends React.Component<IDateSelectProps, {}> {
  render() {
    return (
      <div>
        <Col sm={1} className="align-right">
          <FormLabel align="right">制单时间：</FormLabel>
        </Col>
        <Col sm={2}>
          <FormControl>
            <DatePicker
              onChange={value =>
                this.props.store.changeDate(value, 'billCycleStart')
              }
              value={
                (this.props.store.billCycleStart &&
                  moment(this.props.store.billCycleStart)) ||
                null
              }
            />
          </FormControl>
        </Col>

        <Col sm={1} className="align-right">
          <FormLabel align="right">至：</FormLabel>
        </Col>
        <Col sm={2}>
          <FormControl>
            <DatePicker
              onChange={value =>
                this.props.store.changeDate(value, 'billCycleEnd')
              }
              value={
                (this.props.store.billCycleEnd &&
                  moment(this.props.store.billCycleEnd)) ||
                null
              }
            />
          </FormControl>
        </Col>
      </div>
    );
  }
}
